<template>
  <div class="base-page-wrap">
    <el-tabs v-model="currentTab" @tab-click="handleTabClick" type="border-card" style="height: calc(100vh - 96px)">
      <el-tab-pane name="pageManage">
        <span slot="label"><i class="el-icon-bank-card" /> 功能页面</span>
        <div class="pane-inner-wrap">
          <page-manage :id="id"></page-manage>
        </div>
      </el-tab-pane>
      <el-tab-pane name="datasource">
        <span slot="label"><i class="el-icon-refrigerator" /> 数据源</span>
      </el-tab-pane>
      <el-tab-pane name="dict">
        <span slot="label"><i class="el-icon-takeaway-box" /> 数据字典</span>
        <div class="pane-inner-wrap">
          <dict-manage v-if="show_dict" :id="id"></dict-manage>
        </div>
      </el-tab-pane>
      <el-tab-pane name="publish">
        <span slot="label"><i class="el-icon-upload2" /> 应用发布</span>
        <div class="pane-inner-wrap">
          <app-publish v-if="show_publish" :id="id"></app-publish>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const isdebug = true
import PageManage from './pageManage/index.vue'
import AppPublish from './publish/index.vue'
import DictManage from './dict/index.vue'

export default {
  name: 'AppManage',
  components: { PageManage, AppPublish, DictManage },
  props: {
    id: { type: String, default: '' },
  },
  data() {
    return {
      currentTab: 'pageManage',
      appInfo: {},
      show_publish: false,
      show_dict: false,
      show_datasource: false,
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.resetTab()
    this.init()
  },
  activated() {
    this.resetTab()
  },
  methods: {
    resetTab() {
      const tag = this.$route.query.tab
      if (tag) {
        this.currentTab = tag
        this.handleTabClick({ name: tag })
      }
    },
    handleTabClick({ name }) {
      if (name == 'pageManage') return
      if (!this[`show_${name}`]) this[`show_${name}`] = true
    },
    async init() {
      const res = await this.$request({
        url: '/lowcode/getDataBySql',
        method: 'post',
        data: { sqlid: '应用信息', where: `id='${this.id}'` },
      })
      this.appInfo = res.list[0]

      // console.log('appmanage>init', res)
      const path = `/dev-platform/appmanage/${this.id}`
      const title = '应用开发-' + this.appInfo.appName
      this.$store.commit('tagsView/UPDATE_VISITED_VIEW_TITLE', { path, title })
    },
  },
}
</script>
<style lang="scss" scoped>
.pane-inner-wrap {
  // border: 1px #bbb solid;
  width: 100%;
  height: calc(100vh - 160px);
}
</style>
